import React, { useState, useEffect } from 'react';
import './Search.scss';
import Footer from 'components/Footer'
import classNames from 'classnames';
import * as api from 'api/index'
import { InfiniteScroll } from 'antd-mobile'




// 发现

function Find() {
    // 是否还有更多内容
    let [hasMore, sethasMore] = useState(true)
    let [list, setList] = useState([]);
    let [active, setActive] = useState('01');
    let [params, setParams] = useState({
        kind: '01',
        currPage: 0
    })
    // console.log('@', active);
    //请求数据
    const getSearch = (params) => {
        api.discoverList(params).then((res) => {
            if (res.result.length > 0) {
                setList([...list, ...res.result])
                sethasMore(true)
            } else {
                sethasMore(false)
            }
        })
    }
    // useEffect(getSearch, [params])
    const tabs = (num) => {
        setActive(() => { return num })
        setList([])
        setParams({
            ...params,
            kind: num,
            currPage: 1
        })

        getSearch(params)
    }
    //shang拉更多
    const loadMore = () => {
        setParams({
            ...params,
            currPage: params.currPage + 1
        })
        getSearch(params)
    }
    return (
        <div className='find'>
            <div className='changeTab f16 flex jc-sa aic bg-fff'>
                <div onClick={() => { tabs('01') }} className={classNames(' flex aic', { active: active === '01' })}>路线</div>
                <div onClick={() => { tabs('02') }} className={classNames(' flex aic', { active: active === '02' })}>美墅</div>
                <div onClick={() => { tabs('03') }} className={classNames(' flex aic', { active: active === '03' })}>活动</div>
            </div>
            <div className='null'></div>
            <div className='list-'>
                {list.map((item) => (
                    <div className='li flex aic bg-fff '>
                        <img className='img' src={item.imageUrl} alt="" />
                        <span className='t'>{item.description}</span>
                    </div>
                ))}
            </div>

            <div className='nomore f12 flex aic jc-c'>
                没有更多了
            </div>

            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            <Footer active="03" />
        </div>
    );
}

export default Find;